import React from 'react'
import{ useNavigate} from 'react-router-dom'
import '../../css/dll/message.scss'
export default function Message() {
    const navigate = useNavigate();
    const refanPage = () => {
        navigate('/home/playcar');
      }
      const talk =()=>{
        navigate('/home/index');
      }
  return (
    <div style={{
        width: '100%',
        height: '100%',
        height:'50rem',
        color: '#fff',
        position: 'absolute',
        backgroundImage: 'url(../img/bei.png)',
        backgroundSize: '100% 100%',
    }}>
      <div className="dll_xiao">
        <img style={{
          margin: '0.6rem',
          float: 'left',
        }} src='../imgs/youjian.png' alt="" onClick={refanPage} />
        <span className='dll_xiao_mid'>消息中心</span>
      </div>
      <div className='dll_ling'>
        <img src="../img/ling.png" alt="" />
        <span>系统消息</span>
        <b>6</b>
      </div>
      <div className='dll_ren'>
        <img className='dll_renimg' src="../img/ren.png" alt="" />
        <img className='dll_qun' src="../img/qun.png" alt="" />
        <span>好友申请</span>
        <b>99+</b>
      </div>
      <p style={{
        margin: '15px 30px',
        fontfamily: 'PingFang SC',
        fontSize: '18px',
        textShadow: '0 0 1px white, 0 0 2px white, 0 0 2px white, 0 0 2px white'
      }}>聊天信息</p>
      <div className='dll_message' onClick={talk}>
        <img src="../img/liao1.png" alt="" />
        <div className='dll_message_right'>
            <span style={{fontSize:'14px',textShadow:' 0 0 2px black,0 0 2px black,0 0 1px black,0 0 0px black'}}>Tony贾</span><br />
            <span style={{fontSize:'12px'}}>好友</span>
        </div>
        <div className='dll_message_left'>
        <b>3</b>
        <span>条新消息</span>
        <img style={{position:'absolute',bottom:'0.5rem',right:'-0.5rem'}} src="../img/lefthei.png" alt="" />
        </div>
      </div>
      <div className='dll_message1'>
        <img src="../img/liao2.png" alt="" />
        <div className='dll_message_right'>
            <span style={{fontSize:'14px',textShadow:' 0 0 2px black,0 0 2px black,0 0 1px black,0 0 0px black'}}>田二妞</span><br />
            <span style={{fontSize:'12px'}}>陌生人</span>
        </div>
        <div className='dll_message_left'>
        <b>2</b>
        <span>条打招呼</span>
        <img style={{position:'absolute',bottom:'0.5rem',right:'-0.5rem'}} src="../img/lefthei.png" alt="" />
        </div>
      </div>
      <div className='dll_message2' onClick={talk}>
        <img src="../img/liao1.png" alt="" />
        <div className='dll_message_right'>
            <span style={{fontSize:'14px',textShadow:' 0 0 2px black,0 0 2px black,0 0 1px black,0 0 0px black'}}>Tony贾</span><br />
            <span style={{fontSize:'12px'}}>好友</span>
        </div>
        <div className='dll_message_left'>
        <b>3</b>
        <span>条新消息</span>
        <img style={{position:'absolute',bottom:'0.5rem',right:'-0.5rem'}} src="../img/lefthei.png" alt="" />
        </div>
      </div>
    </div>
  )
}
